import * as TOOL from "../tool"
import { DataSegment } from "../../datastructure/DataSegment";

export class StatusBar {
    public element: HTMLElement | null;
    private fields: { [key: string]: string } = {
        "name": "姓名",
        "occupation": "职业",
        "age": "年龄",
        "gender": "性别",
        "language": "语言",
        "ethnicity": "种族",
        "body": "体型",
        "background": "背景",
        "LV": "等级(LV)",
        "XP": "经验值(XP)",
        "HP": "生命值(HP)",
        "STR": "力量(STR)",
        "DEX": "敏捷(DEX)",
        "CON": "体质(CON)",
        "INT": "智力(INT)",
        "WIS": "感知(WIS)",
        "CHA": "魅力(CHA)",
        "url": "详细状态"
    };

    constructor(element?: Element | string | null | undefined) {
        this.element = TOOL.creatElement(element);
        this.element.appendChild(this.createTable());
        this.element.classList.add("table-responsive");
    }

    public resize(height: number, width: number) {
        this.element!.style.height = height * 0.2 + "px";
        this.element!.style.width = width * 0.8 + "px";
        this.element!.style.top = height * 0.8 + "px";
        this.element!.style.left = "0";
    }

    private createTable(data?: DataSegment): Element {
        let datamap = data ? data.map : this.fields;
        let table: HTMLElement = document.createElement("table");
        let tr: HTMLElement = document.createElement("tr");
        for (let key in datamap) {
            let td1: HTMLElement = document.createElement("td");
            let td2: HTMLElement = document.createElement("td");
            td1.style.padding = "3px 3px 3px 3px";
            td2.style.padding = "3px 3px 3px 3px";
            td1.style.verticalAlign = "middle";
            td2.style.verticalAlign = "middle";
            td1.innerHTML = this.fields[key];
            if (key == "name") {
                td2.appendChild(TOOL.createBadge(this.fields[key]));
            } else {
                td2.innerHTML = "";
            }
            td2.id = key;
            tr.appendChild(td1);
            tr.appendChild(td2);
            if (key == "background") {
                td2.setAttribute("colspan", "5");
                table.appendChild(tr);
                tr = document.createElement("tr");
            } else if (key == "url") {
                td2.setAttribute("colspan", "3");
                table.appendChild(tr);
                tr = document.createElement("tr");
            }

        }
        table.appendChild(tr);
        table.classList.add("table");
        table.classList.add("table-bordered");
        table.id = "StatusTable";
        table.style.fontSize = "10px";
        table.style.textAlign = "center";
        return table;
    }

    public onStatus(message: DataSegment) {
        let where = message.get("where");
        switch (where) {
            case "all": {
                let to = message.get("to") as DataSegment;
                for (let [k, v] of to.map) {
                    let element = document.getElementById(k as string);
                    if (element) {
                        element.innerHTML = v as string;
                    }
                }
            }
                break;
            default: {
                let to = message.get("to") as string;
                document.getElementById(where as string)!.innerHTML = to;
            }
        }

    }

    public onMessageSend = (str: string) => {
    };

}

